<include file="public@header" />
</head>
<body>
<div class="wrap">
	<form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('Goods/setGoodsAttrPost')}">
		<div id="form-item-box">
			<div class="form-group">
				<label class="col-sm-2 control-label">属性</label>
				<div class="col-md-6 col-sm-10">
					<input type="text" class="form-control" name="attr[]">
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label"></label>
			<div class="col-md-6 col-sm-10">
				<button type="button" onclick="addFormItem()" class="btn btn-default">添加表单项</button>
			</div>
		</div>

		<input type="hidden" name="goods_id" value="{$goods_id}">

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
				<a class=" btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
			</div>
		</div>
	</form>
</div>
<script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
<script>
	function addFormItem()
	{
		//获取大盒子
		const formItemBox = document.getElementById('form-item-box')

		//创建input
		const input = document.createElement ("input")
		input.type = 'text'
		input.className = 'form-control'
		input.name = 'attr[]'

		//创建删除按钮
		const removeButton = document.createElement ("button")
		removeButton.className = 'btn btn-danger btn-sm'
		removeButton.innerText ='移除'
		removeButton.type = 'button'
		removeButton.onclick = function () {
			removeFormItem(this)
		}

		//创建input， button的父元素
		const inputParent = document.createElement ("div")
		inputParent.className = 'col-md-6 col-sm-10'
		inputParent.style.display = 'flex'
		inputParent.appendChild(input)
		inputParent.appendChild(removeButton)

		//创建Label标签
		const label = document.createElement("label")
		label.className = 'col-sm-2 control-label'
		label.innerText ='属性'

		//创建最外层的div
		const formGroupDiv = document.createElement("div")
		formGroupDiv.className = 'form-group'
		formGroupDiv.appendChild(label)
		formGroupDiv.appendChild(inputParent)

		formItemBox.appendChild(formGroupDiv)

		// console.log(inputParent)
	}

	//移除菜单项
	function removeFormItem(button)
	{
		//获取大盒子
		const formItemBox = document.getElementById('form-item-box')
		formItemBox.removeChild(button.parentNode.parentNode)
	}

</script>
</body>
</html>
